/*
 * @Author: luoqi
 * @Date: 2022-04-04 13:27:49
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-23 20:50:33
 * @Description: 
 */

import React,{ useState } from 'react';
import {  Button,Modal,Form, Input, Radio,Select,Upload, message,InputNumber } from 'antd';
import {  PlusOutlined, UploadOutlined } from '@ant-design/icons';
import axios from '../../utils/axios'
import qs from 'qs'
const { Option } = Select;



const Modifyuser = (props) => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [value, setValue] = React.useState(1);
  const {data}=props
    //上传图片
    const [imgUrl, setImgUrl] = useState()
    const [form1]=Form.useForm()
    const showModal = () => {
      setIsModalVisible(true);
    };
  
    const handleOk = () => {
      
      form1.submit()
    };
  
    const handleCancel = () => {
      setIsModalVisible(false);
    };
    const onFinish = (values) => {
      console.log('Success:', values);
      let {age,nickname,phone,password,qrPassword,status,occupation}=values;
      if(password===qrPassword){
        axios({
        url:'/user/upsert',
        method:'post',
        data:qs.stringify({
          id:data.id,
          age:age,
          nickname,
          phone,
          password,
          occupation,
          status,
          headImg:imgUrl,
        })
      }).then(res=>{
        console.log(res);
        if (res.code == '200') {
          props.setNum(1);
          //清空表单
          form1.resetFields()
          //关闭
          setIsModalVisible(false);
        }
      })
      }else{
        message.error('前后密码不一致！');
      }

    };
  
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo);
    };
    const onChange = e => {
      console.log('radio checked', e.target.value);
      setValue(e.target.value);
    };
    function handleChange(value) {
      console.log(`selected ${value}`);
    }
      //上传文件
  const props1 = {
    name: 'file',
    action: '/api/upload',
    onChange(info) {
      // console.log(info);
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        console.log(info.file.response);
        let { fileName } = info.file.response
        setImgUrl(fileName)
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };
  return (
    <div>
      <Button type="primary" ghost  onClick={showModal}>修改</Button>
      <Modal title="修改用户" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确定"
            cancelText="取消">
        <Form
          name="basic"
          form={form1}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          initialValues={{nickname:data&&data.nickname,phone:data&&data.phone,age:data&&data.age,occupation:data&&data.occupation,status:data&&data.status?1:2}}
        >
          <Form.Item
            label="用户昵称"
            name="nickname"
            rules={[{ required: true, message: '请输入用户昵称' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="用户手机号"
            name="phone"
            rules={[{ required: true, message: '请输入用户手机号',pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="修改密码"
            name="password"
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认用户密码"
            name="qrPassword"
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="用户年龄"
            name="age"
          >
            <InputNumber/>
          </Form.Item>
          <Form.Item
            label="用户头像"
          >
            <img style={{width:'100px',height:'100px'}} src={data.headImg} alt="" />
          </Form.Item>
          <Form.Item
            label="修改头像"
          >
            <Upload {...props1}>
              <Button icon={<UploadOutlined />}>上传用户头像</Button>
            </Upload>
          </Form.Item>
          <Form.Item
            label="选择用户职业"
            name="occupation"
          >
            <Select style={{ width: 120 }} onChange={handleChange}>
              <Option value="医生">医生</Option>
              <Option value="学生">学生</Option>
              <Option value="家庭主妇">家庭主妇</Option>
              <Option value="其他">其他</Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="用户状态"
            name="status"
          >
            <Radio.Group onChange={onChange} value={value} >
              <Radio value={1}>可用</Radio>
              <Radio value={2}>不可用</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default Modifyuser;
